<template>
	<view class="ma">
		<view class="box" :style="blockStyle" v-if="type != 2">
			<view class="box-head" :style="headStyle">
				<view class="head-title">
					<text :class="mydata.content.icon + ' _i'" :style="headIconStyle"></text>
					<text class="_span" :style="headTxtStyle">{{ mydata.content.title }}</text>
					<view :style="headTimeStyle">
						<view class="load-time" :style="'color:' + mydata.color.time_text_color">
							<text class="_span">{{ type == 0 ? '距开始' : '还剩' }}：</text>
							<u-count-down
								separator-size="24"
								font-size="24"
								:separator-color="mydata.color.time_text_color"
								:bg-color="mydata.color.time_bg_color"
								:color="mydata.color.time_num_color"
								:timestamp="time"
								separator="zh"
							></u-count-down>
						</view>
					</view>
				</view>
			</view>
			<view class="box-content">
				<view :class="mydata.seckillType == 1 ? 'content' : 'content1'">
					<view class="content-item" @click.stop="todetial(item)" :style="'background:' + mydata.color.commodity_bg" v-for="(item, i) in list" :key="i">
						<view class="item-img"><vimage lazy-load :src="item.master" alt class="good-img" draggable="false"></vimage></view>
						<view class="item-txt">
							<template v-if="mydata.seckillType == 1">
								<view class="txt-title" :style="'color:' + mydata.color.commodity_title_color">
									<view v-if="!mydata.showsell" class="group-label">{{ item.success_num }}人团</view>
									{{ item.goods_name }}
								</view>
								<view class="txt-title2" v-if="mydata.seckillType == 2">{{ item.subtitle }}</view>
								<view class="label-sales" v-if="mydata.showsell">
									<view class="group-label">{{ item.success_num }}人团</view>
									<text class="sales">已拼{{ item.sell }}件</text>
								</view>

								<view class="txt-price" :style="commodityPriceStyle">
									{{ mydata.commodity_price_title }}
									<text class="_text">￥{{ item.activity_price }}</text>
								</view>
								<view class="old-price" :style="oldPriceTitleStyle">{{ mydata.old_price_title }}￥{{ item.sell_price }}</view>
								<view
									class="item-buttom"
									@click.stop="gotrolley(item)"
									v-if="mydata.btns.show"
									:style="'color:' + mydata.btns.color + ';background:' + mydata.btns.bg"
								>
									{{ mydata.btns.text }}
								</view>
							</template>

							<view id="" v-if="mydata.seckillType == 2">
								<view class="txt-title" :style="'color:' + mydata.color.commodity_title_color">
									<view v-if="!mydata.showsell" class="group-label">{{ item.success_num }}人团</view>
									{{ item.goods_name }}
								</view>
								<view class="txt-title2" v-if="mydata.seckillType == 2">{{ item.subtitle }}</view>
								<view class="label-sales" v-if="mydata.showsell">
									<view class="group-label">{{ item.success_num }}人团</view>
									<text class="sales">已拼{{ item.sell }}件</text>
								</view>
							</view>
							<view class="" v-if="mydata.seckillType == 2">
								<view class="txt-price" :style="commodityPriceStyle">
									{{ mydata.commodity_price_title }}
									<text class="_text">￥{{ item.activity_price }}</text>
								</view>
								<view class="old-price" :style="oldPriceTitleStyle">{{ mydata.old_price_title }}￥{{ item.sell_price }}</view>
								<view
									@click.stop="gotrolley(item)"
									class="item-buttom"
									v-if="mydata.seckillType == 2 && mydata.btns.show"
									:style="'color:' + mydata.btns.color + ';background:' + mydata.btns.bg"
								>
									{{ mydata.btns.text }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	data() {
		return {
			time: 0,
			type: 2,
			list: []
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {
				margin: {},
				radius: {},
				color: {},
				price_margin: {}
			}
		}
	},
	created() {
		this.getlist();
	},
	computed: {
		blockStyle() {
			let s = 'margin:' + this.mydata.margin.top + 'rpx ' + this.mydata.margin.lr + 'rpx ' + this.mydata.margin.bottom + 'rpx;';
			s += 'border-radius:' + this.mydata.radius.template_radius + 'rpx;';
			s += 'background:' + this.mydata.color.bg + ';';
			s += 'color:' + this.mydata.color.left + ';';
			s += 'justify-content:' + this.mydata.posAlign + ';';
			return s;
		},
		headIconStyle() {
			return 'color:' + this.mydata.color.head_icon_color + ';';
		},
		headTxtStyle() {
			return 'color:' + this.mydata.color.head_txt_color + ';';
		},
		headStyle() {
			return 'background:' + this.mydata.color.head_bg + ';';
		},

		headMoreStyle() {
			let s = 'display:' + this.mydata.showMore + ';';
			s += 'color:' + this.mydata.color.head_more_color + ';';
			return s;
		},
		commodityTitleStyle() {
			return 'color:' + this.mydata.color.commodity_title_color + ';';
		},
		commodityPriceStyle() {
			return 'color:' + this.mydata.color.commodity_price_color + ';';
		},
		priceTitleStyle() {
			let s = 'background:' + this.mydata.color.price_title_bg + ';';
			s += 'color:' + this.mydata.color.price_title_color + ';';
			return s;
		},
		oldPriceTitleStyle() {
			let s = 'display:' + this.mydata.showoldPrice + ';';
			s += 'color:' + this.mydata.color.old_price_title_color + ';';
			return s;
		},
		headTimeStyle() {
			return 'display:' + this.mydata.showTime + ';';
		},
		setTime() {
			let timer = this.mydata.timer;
			let nowtime = new Date().getTime();
			let start_time = Date.parse(timer[0]);
			let cha = start_time - nowtime;
			let timerArr = [];
			if (cha >= 0) {
				timerArr[0] = parseInt((cha % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				timerArr[1] = parseInt((cha % (1000 * 60 * 60)) / (1000 * 60));
				timerArr[2] = parseInt((cha % (1000 * 60)) / 1000);
			}
			return timerArr;
		}
	},
	methods: {
		getminprice(list, type) {
			// let minprice=0
			if (type == 1) {
				let min_list = list.sort((a, b) => {
					return Number(a.activity_price) - Number(b.activity_price) > 0;
				});
				return min_list[0].activity_price;
			} else {
				console.log(list);
				list.forEach(a => {
					a.activity_price = JSON.parse(a.activity_price);
					let activity_price = JSON.parse(JSON.stringify(a.activity_price));
					a.minprice = activity_price.sort((d, f) => {
						return Number(d) - Number(f) > 0;
					});
				});
				let min_list = list.sort((a, b) => {
					return Number(a.minprice[0]) - Number(b.minprice[0]) > 0;
				});
				return min_list[0].minprice[0];
			}
		},
		getgroup(list) {
			let id = this.mydata.selectdata.id;
			this.$http('/collage/group/' + id, {}, 'get').then(res => {
				let json = res.data.msg;
				if (!json) {
					return false;
				}
				this.type = json.status;
				if (json.status == 1) {
					this.time = (new Date(json.end_time) - new Date()) / 1000;
				} else if (json.status == 0) {
					this.time = (new Date(json.start_time) - new Date()) / 1000;
				}
				let commodity = res.data.msg.commodity;
				let mylist = [];
				list.forEach(a => {
					let i = commodity.findIndex(_ => _.commodity_id == a.id);
					if (i > -1) {
						let item = commodity[i];
						if (item.type == 1) {
							a.success_num = item.success_num;
							if (item.has_sku) {
								a.activity_price = this.getminprice(item.sku, 1);
							} else {
								a.activity_price = item.activity_price;
							}
						} else {
							let success_num = JSON.parse(item.success_num);
							a.success_num = success_num[success_num.length - 1];
							if (item.has_sku) {
								a.activity_price = this.getminprice(item.sku, 2);
							} else {
								// console.log(item.)
								let activity_price = JSON.parse(item.activity_price);
								a.activity_price = activity_price[activity_price.length - 1];
							}
						}
						mylist.push(a);
					} else {
					}
				});
				this.list = mylist;
			});
		},
		getlist() {
			let list = this.mydata.list;
			let cids = [];
			let type = list[0].type == 0 ? 1 : list[0].type;
			list.forEach(a => {
				cids.push(a.id);
			});
			this.$http(
				'/goods/getManyGoods',
				{
					cids: JSON.stringify(cids),
					type: type
				},
				'POST'
			).then(res => {
				if (res.statusCode == 200) {
					let list = res.data.msg;
					list.forEach(a => {
						a.p_type = type;
						a.sellout = !(a.sell - a.total);
						if (a.sku && a.sku.length > 0) {
							a.now_level_price = util.getminprice(a.sku);
						} else {
							if (a.level_price) {
								a.now_level_price = util.getprice(a);
							}
						}
					});
					this.getgroup(list);
					// this.list = list;
				} else {
				}
			});
		},
		gotrolley(item) {
			let data = {
				show: true,
				id: item.id,
				type: item.p_type
			};
			this.$store.commit('settrolley', data);
		},
		todetial(item) {
			if (item.p_type == '2') {
				this.Jumpurl({
					type: 1,
					link: '../goods/detail?id=' + item.id
				});
			} else {
				this.Jumpurl({
					type: 2,
					id: item.id
				});
			}
		}
	}
};
</script>

<style lang="scss">
.ma {
	width: 100%;
	.box {
		border-radius: 10rpx;
		overflow: hidden;
		background: #fff;
		box-sizing: border-box;
		.box-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;
			.head-title {
				font-size: 16px;
				margin-right: 5px;
				display: flex;
				align-items: center;
				._span {
					line-height: 60rpx;
					font-weight: bold;
				}
				._i {
					font-size: 44rpx;
					margin-right: 10rpx;
				}
			}
			.load-time {
				color: #fff;
				font-size: 24rpx;
				margin-left: 10rpx;

				.time {
					width: 32rpx;
					color: #fff;
					text-align: center;
					margin: 0px 4rpx;
					height: 32rpx;
					border-radius: 4rpx;
					display: inline-block;
					line-height: 32rpx;
				}
			}
			.head-more {
				font-size: 28rpx;
			}
		}
		.box-content {
			// min-height: 400rpx;
			padding: 0 10rpx;
			.content {
				overflow: auto;
				display: flex;
				width: 100%;
				// padding: 5px;
				.content-item {
					margin: 10rpx;
					width: 244rpx;
					// padding: 5px;
					border-radius: 10rpx;
					flex-shrink: 0;
					// background: #fff;
					.item-img {
						border-radius: 6rpx;
						overflow: hidden;
						background: #e8e8e8;
						width: 244rpx;
						height: 244rpx;
						.good-img {
							width: 244rpx;
							height: 244rpx;
							display: block;
						}
					}
					.item-txt {
						font-size: 24rpx;
						padding: 10rpx;
						box-sizing: border-box;
						.txt-title {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							height: 80rpx;
							line-height: 40rpx;
						}
						.group-label {
							background: #ff3c29;
							color: #fff;
							padding: 2rpx 2rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							font-size: 24rpx;
							display: inline-block;
							line-height: 1;
						}
						.label-sales {
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							color: #ff3c29;
							font-size: 28rpx;

							.sales {
								color: #ff9900;
								font-size: 24rpx;
							}
						}
						.txt-price {
							display: flex;
							align-items: center;

							color: #ff3c29;
							font-size: 24rpx;
							// view {
							// 	background: #ff3c29;
							// 	color: #fff;
							// 	padding: 2rpx 2rpx;
							// 	border-radius: 6rpx;
							// 	margin-right: 10rpx;
							// 	font-size: 24rpx;
							// }
							._text {
								font-weight: bold;
							}
						}
						.old-price {
							margin-top: 10rpx;
							color: #666;
							font-size: 24rpx;
						}
					}
				}
				.item-buttom {
					padding: 10rpx 30rpx;
					font-size: 24rpx;
					background: #ff3c29;
					border-radius: 60rpx;
					color: #fff;
					text-align: center;
					margin-top: 10rpx;
				}
			}
			.content1 {
				width: 100%;
				padding: 0px 20rpx;
				.content-item {
					padding: 10rpx;
					border-radius: 10rpx;
					display: flex;
					margin: 20rpx 0px;
					position: relative;
					.item-img {
						width: 230rpx;
						height: 230rpx;
						border-radius: 6rpx;
						overflow: hidden;
						background: #e8e8e8;
						.good-img {
							width: 100%;
							height: 100%;
							display: block;
						}
					}
					.item-txt {
						margin-left: 20rpx;
						font-size: 28rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						width: 400rpx;
						.txt-title {
							font-size: 32rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							height: 80rpx;
							line-height: 40rpx;
						}
						.group-label {
							background: #ff3c29;
							color: #fff;
							padding: 2rpx 2rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							font-size: 24rpx;
							display: inline-block;
							line-height: 1;
						}
						.label-sales {
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							color: #ff3c29;
							font-size: 28rpx;

							.sales {
								color: #ff9900;
								font-size: 24rpx;
							}
						}
						.txt-title2 {
							margin: 10rpx 0px;
							font-size: 24rpx;
							color: #999;
						}
						.txt-price {
							display: flex;
							align-items: center;
							font-weight: bold;
							color: #ff3c29;
							font-size: 28rpx;
							// view {
							// 	background: #ff3c29;
							// 	color: #fff;
							// 	padding: 2rpx 2rpx;
							// 	border-radius: 6rpx;
							// 	margin-right: 10rpx;
							// 	font-size: 24rpx;
							// }
						}
						.old-price {
							margin-top: 10rpx;
							color: #666;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}

					.item-buttom {
						padding: 10rpx 30rpx;
						font-size: 24rpx;
						background: #ff3c29;
						border-radius: 60rpx;
						color: #fff;
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
					}
				}
			}
		}
	}
}
</style>
